<template>
  <div>
    <el-main class="col_scroll col_scroll_new" :style="{ '--zoom': zoom }">
      <el-row>
        <el-col v-if="over_day > 0 && over_day < 30">
          <div class="countdown">本账号体验仅剩{{ over_day }}天，到期后将无法继续使用，建议尽快开通正式版服务。联系电话{{ telephone }}</div>
        </el-col>

        <el-col :span="17">
          <el-row style="margin: 0" :gutter="26" class="work_t_b">
            <el-col :span="24" class="work_t_title">
              <el-card shadow="always" style="margin-bottom: 13px;">
                <div class="title title_B">
                  <div class="title_f">
                    <i class="el-icon-s-order" style="color: #2b6af7;font-size: 24px;"></i>
                    <div class="t_title">走访情况</div>
                  </div>

                  <el-date-picker :clearable="false" value-format="yyyy-MM-dd" @change="dateChange" v-model="value2"
                    type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
                  </el-date-picker>
                </div>
                <el-row :gutter="13">
                  <el-col :span="13" class="work_t_title" style="border-right: 1px solid #ebeef5;">
                    <div class="title">
                      <div class="" style="margin: 10px 0;">企业走访工作情况 (共<span style="color:#5571c5;font-weight: bold;">{{
                        homeDate.company_num + homeDate.organization_num
                      }}</span>家)</div>
                    </div>
                    <div v-loading="loading">
                      <div style="height: 370px;" ref="bar" v-show="sumIsZero(homeDate.value_arr)">
                      </div>
                      <div v-show="!sumIsZero(homeDate.value_arr)" style="height: 370px;">
                        <img class="nullBgc" src="@/assets/web/newNull.png" alt="" />
                      </div>
                    </div>
                  </el-col>
                  <!-- <el-col :span="3" class="work_t_title" style="border-right: 1px solid #ebeef5;">
                    <div class="title">
                      <div class="" style="margin-top: 10px;">走访对象情况</div>
                    </div>
                    <div style="height: 370px;" v-loading="loading"
                      v-if="loading || homeDate.company_num || homeDate.organization_num">
                      <div class="visitObjNew">
                        <div class="visitItem">
                          <div class="title">企业</div>
                          <div class="number" style="color: #5571c5;">{{ homeDate.company_num }}<span>家</span></div>
                        </div>
                        <div class="visitItem">
                          <div class="title">机构</div>
                          <div class="number" style="color: #90cc77;">{{ homeDate.organization_num }}<span>家</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-else style="height: 370px;">
                      <img class="nullBgc" src="@/assets/web/newNull.png" alt="" />
                    </div>
                  </el-col> -->
                  <el-col :span="11" class="work_t_title">
                    <div class="title">
                      <div class="" style="margin: 10px 0;">企业需求情况</div>
                    </div>

                    <div v-loading="loading">
                      <div style="height: 370px;" v-if="homeDate.demand_result && homeDate.demand_result.length">
                        <div class="visitObj">
                          <div class="visitItem" @click="demandData(item)"
                            v-for="(item, index) in homeDate.demand_result.slice(0, 4)" :key="item.name + 'index'">
                            <div style="" class="title textDes">{{ item.name }}</div>
                            <div class="number" :style="{ color: backgroundColor[index] }">{{ item.value
                            }}<span>个</span>
                            </div>
                          </div>
                        </div>

                        <div style="height: 282px;" ref="pie2">
                        </div>
                      </div>
                      <div v-else style="height: 370px;">
                        <img class="nullBgc" src="@/assets/web/newNull.png" alt="" />
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>


            <el-col :span="12" class="" style="margin-bottom: 40px;padding-right: 6px;">
              <el-card shadow="always" class="col_scroll">
                <el-row class="work_t_b" style="min-width: 585px;">
                  <el-col class="work_t_title">
                    <div class="boxTitle title_B">
                      <div class="title">
                        <div class="title_f">
                          <i class="el-icon-s-order" style="color: #2b6af7;font-size: 24px;"></i>
                          <div class="t_title">待走访</div>
                        </div>
                        <div> <el-button type="primary" round size="small" class="t_buttpn" @click="addVisit(1)">发起走访 +
                          </el-button></div>
                      </div>
                      <div>
                        <el-button class="button_qb" type="primary" round size="small" @click="pushworkWaitvisit">全部走访记录 >
                        </el-button>
                      </div>
                    </div>
                  </el-col>
                  <el-col class="work_b_text" :infinite-scroll-delay="500" :infinite-scroll-disabled="disabled1">
                    <div style="
                        overflow: scroll;
                        overflow-x: hidden;
                        overflow-y: auto;
                        height: 280px;
                        margin: 20px 0 0 0;
                      " ref="scro1" :style="{ width: scro1 ? 'calc(100% + 17px)' : '100%' }" v-infinite-scroll="load_1"
                      infinite-scroll-delay="800" :infinite-scroll-distance="250">

                      <div class="enterpriseBox">
                        <div class="enterpriseItem" v-for="item in tableData1" :key="item.id" @click="tableclick(item)">
                          <div class="icon">
                            <i class="el-icon-document"></i>
                          </div>
                          <div class="info">
                            <div class="title">
                              {{ item.company_name }}
                              <el-tag v-for="(item_, index_) in item.company_label.one"
                                :key="item_.id + item_.honor.name + index_" effect="plain" size="small" type="danger">{{
                                  item_.honor.name }}</el-tag>
                              <el-tag v-for="(item_, index_) in item.company_label.two"
                                :key="item_.id + item_.name + index_" effect="plain" size="small" type="danger">{{
                                  item_.name }}</el-tag>
                              <el-tag v-for="(item_, index_) in item.company_label.three"
                                :key="item_.id + item_.name + index_" effect="plain" size="small" type="danger">{{
                                  item_.name }}</el-tag>
                            </div>
                            <div class="visitInfo">
                              <div v-if="item.work_name">
                                <div class="people">
                                  <span>{{ item.work_name }}</span>
                                </div>
                              </div>
                              <div class="time1">
                                {{ item.v_time | formatDate }} 走访
                              </div>
                            </div>

                          </div>

                          <div class="goVisitBox">
                            <el-button type="primary" round size="small" class="goVisit"
                              @click.stop="goVisit(item)">马上跟进</el-button>
                          </div>
                        </div>
                      </div>
                      <!-- <el-table @row-click="tableclick" :header-cell-style="{ backgroundColor: '#f6f4fc' }"
                        :data="tableData1" style="width: 100%">
                        <el-table-column label="企业名称" width="250">
                          <template slot-scope="scope">
                            {{ scope.row.company_name }}
                            <el-tag class="b_bule red" v-if="!scope.row.company.is_support_visit" size="small">
                              不支持走访
                            </el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column label="企业标签">
                          <template slot-scope="scope">
                            <el-tag class="b_bule" size="small" v-for="(item, index) in scope.row.company_label.one"
                              :key="scope.row.demand_id + item.honor.name + index">
                              {{ item.honor.name }}
                            </el-tag>
                            <el-tag class="b_bule" size="small" v-for="item in scope.row.company_label.two"
                              :key="scope.row.demand_id + item.name">
                              {{ item.name }}
                            </el-tag>
                            <el-tag class="b_bule" size="small" v-for="item in scope.row.company_label.three"
                              :key="scope.row.demand_id + item.name">
                              {{ item.name }}
                            </el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column label="走访时间">
                          <template slot-scope="scope">
                            <div>
                              <div style="display: flex; justify-content: center">
                                <el-tag class="b_bule red" v-if="expire(scope.row.v_time)" size="small">
                                  逾期
                                </el-tag>
                                <span class="time">
                                  {{ scope.row.v_time | formatDate }}
                                </span>
                              </div>
                              <el-button type="primary" round size="small" class="goVisit"
                                @click.stop="goVisit(scope.row)">
                                马上走访</el-button>
                            </div>
                          </template>
                        </el-table-column>
                      </el-table> -->
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="12" style="margin: 0;margin-bottom: 40px;padding-left: 6px;">
              <el-card shadow="always" class="col_scroll">
                <el-row class="work_t_b" style="min-width: 585px">
                  <el-col class="work_t_title">

                    <div class="boxTitle title_B">
                      <div class="title">
                        <div class="title_f">
                          <i class="el-icon-s-order" style="color: #2b6af7;font-size: 24px;"></i>
                          <div class="t_title">需求跟进</div>
                        </div>
                        <div> <el-button type="primary" round size="small" class="t_buttpn" @click="addVisit(2)">添加需求 +
                          </el-button></div>
                      </div>
                      <div>
                        <el-button class="button_qb" type="primary" round size="small" @click="pushworkFollow">全部需求记录 >
                        </el-button>
                      </div>
                    </div>
                  </el-col>
                  <el-col class="work_b_text work_b_text2">
                    <div style="
                        overflow-x: hidden;
                        overflow-y: auto;
                        height: 280px;
                        margin: 20px 0 0 0;
                      " ref="scro2" :style="{ width: scro2 ? 'calc(100% + 17px)' : '100%' }"
                      v-infinite-scroll="load_2">


                      <div class="enterpriseBox">
                        <div class="enterpriseItem" v-for="item in tableData2" :key="item.demand_id + 'scro2'"
                          @click="tableclick(item)">
                          <div class="icon">
                            <i class="el-icon-document"></i>
                          </div>
                          <div class="info">
                            <div class="title">
                              {{ item.company_name }}
                              <el-tag v-for="(item_, index_) in item.demand_name" :key="item.id + item_.name + index_"
                                effect="plain" size="small" type="danger">{{ item_.name }}</el-tag>
                            </div>
                            <div class="visitInfo">
                              <div class="demand">
                                <span>{{ item.demand_des }}</span>
                              </div>
                            </div>
                            <div class="visitInfo">
                              <div v-if="item.so_id_name">
                                <div class="people">
                                  <span>{{ item.so_id_name }}</span>
                                </div>
                              </div>
                              <div class="time1">
                                {{ item.solve_time | formatDate }} 前解决
                              </div>
                            </div>
                          </div>
                          <div class="goVisitBox">
                            <el-button type="primary" round size="small" class="goVisit"
                              @click.stop="goVisit(item)">马上跟进</el-button>
                          </div>
                        </div>
                      </div>
                      <!-- <el-table @row-click="tableclick" :header-cell-style="{ backgroundColor: '#f6f4fc' }"
                        :data="tableData2" style="width: 100%">
                        <el-table-column prop="demand_des" label="需求内容" width="150">
                          <template slot-scope="scope">
                            <div class="textDes">{{ scope.row.demand_des }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column label="企业名称" width="180">
                          <template slot-scope="scope">
                            {{ scope.row.company_name }}
                            <el-tag class="b_bule red" v-if="!scope.row.company.is_support_visit" size="small">
                              不支持走访
                            </el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column label="需求标签">
                          <template slot-scope="scope">
                            <el-tag class="b_bule b_red" size="small" v-for="(item, index) in scope.row.demand_name"
                              :key="scope.row.id + item.name + index">
                              {{ item.name }}
                            </el-tag>
                          </template>
                        </el-table-column>

                        <el-table-column width="140" label="待解决时间">
                          <template slot-scope="scope">
                            <div>
                              <span class="time">
                                {{ scope.row.solve_time | formatDate }}
                              </span>
                              <el-button type="primary" round size="small" class="goVisit"
                                @click.stop="goVisit(scope.row)">马上跟进</el-button>
                            </div>
                          </template>
                        </el-table-column>
                      </el-table> -->
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="7">
          <div class="introduction" v-if="bannerList.length">
            <el-carousel height="160px" style="padding: 0;">
              <el-carousel-item v-for="item in bannerList" :key="item">
                <el-image fit="contain" :src="item.tpic"></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
          <el-card shadow="always" class="work_t_b" :style="{ marginTop: bannerList.length ? '13px' : '0px' }">
            <div class="work_t_title">
              <div class="title title_B">
                <div class="title_f">
                  <i class="el-icon-s-order" style="color: #2b6af7;font-size: 24px;"></i>
                  <div class="t_title">上月法律事件分析</div>
                </div>
              </div>
              <div style="height: 242px;" v-loading="loading2">
                <div class="visitObj  visitObj_r">
                  <div class="visitItem" @click="goPatent(1)">
                    <div class="title">新授权专利</div>
                    <div class="number" style="color: #5571c5;">{{ homeDate_r.one | isNull }}<span>个</span></div>
                  </div>
                  <div class="visitItem" @click="goPatent(4)">
                    <div class="title">PCT专利</div>
                    <div class="number" style="color: #90cc77;">{{ homeDate_r.two | isNull }}<span>个</span></div>
                  </div>
                  <div class="visitItem" @click="goPatent(3)">
                    <div class="title">质押融资</div>
                    <div class="number" style="color: #fac85b;">{{ homeDate_r.three | isNull }}<span>个</span></div>
                  </div>
                  <div class="visitItem" @click="goPatent(2)">
                    <div class="title">转让</div>
                    <div class="number" style="color: #ee6666;">{{ homeDate_r.four | isNull }}<span>个</span></div>
                  </div>
                  <div class="visitItem" @click="goPatent(6)">
                    <div class="title">诉讼</div>
                    <div class="number" style="color: #73c0de;">{{ homeDate_r.five | isNull }}<span>个</span></div>
                  </div>
                  <div class="visitItem">
                    <div class="title">马德里</div>
                    <div class="number" style="color: #3aa273;">{{ homeDate_r.six | isNull }}<span>个</span></div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>

          <div shadow="always" class="work_t_b reportBox" style="margin-top: 13px;">
            <div class="work_t_title">
              <div class="boxTitle boxTitle_report">
                <div class="title">
                  <div class="title_f">
                    <i class="el-icon-s-order" style="color: #fff;font-size: 24px;"></i>
                    <div class="t_title" style="color: #fff;">分析报告</div>
                  </div>
                  <div><el-button type="primary" round size="small" class="t_buttpn addReport_b" @click="createReport">+
                      创建报告</el-button></div>
                </div>
              </div>
              <div>
                <div style="overflow: hidden;margin: 0 20px 20px;">
                  <div class="report" :class="bannerList.length ? '' : 'report1'" ref="scro3"
                    v-infinite-scroll="reportLoding" :infinite-scroll-disabled="disabled3"
                    :style="scro3 ? 'width: calc(100% + 17px);' : 'width: 100%;'">

                    <div class="enterpriseBox">
                      <div class="enterpriseItem" style="margin-top: 15px;margin-bottom: 0px;padding: 0"
                        v-for="item in reportData.list" :key="item.id">
                        <div class="goData" @click="oldDatas(item)">
                          <div class="icon" >
                            <i class="el-icon-document"></i>
                          </div>
                          <div class="info" >
                            <div class="title">
                              <div class="title" v-if="item.type == 1">
                                {{ item.date }}分析报告
                              </div>
                              <div class="title" v-else>
                                {{ item.date }}至{{ item.date_end }}分析报告
                              </div>
                            </div>
                            <div class="visitInfo">

                              <div class="demand">
                                <span>生成时间:{{ item.create_time }}</span>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div>
                          <el-popconfirm style="display: flex;align-items: center;height: 100%;padding: 20px;"
                            @confirm="confirm(item)" v-if="item.type == 2" confirm-button-text='好的'
                            cancel-button-text='不用了' icon="el-icon-info" icon-color="red" title="确定删除吗？">
                            <div slot="reference" class="flex">
                              <i class="el-icon-delete-solid" style="color: #e85653;font-size: 20px;cursor: pointer;"></i>
                            </div>
                          </el-popconfirm>
                        </div>
                      </div>
                    </div>


                    <!-- <div class="item" v-for="item in reportData.list" :key="item.create_time">
                      <div class="text">
                        <div class="title" v-if="item.type == 1">
                          {{ item.date }}分析报告
                        </div>
                        <div class="title" v-else>
                          {{ item.date }}至{{ item.date_end }}分析报告
                        </div>
                        <div class="date">
                          生成时间:{{ item.create_time }}
                        </div>
                      </div>

                      <div class="statusBox">
                        <div class="status" v-if="(item.status == 0 || item.status == 1) && item.type != 1">
                          {{ item.status ? '生成中' : '待生成' }}
                        </div>
                        <div class="status status1" v-else @click="oldDatas(item)">
                          查看
                        </div>


                        <el-popconfirm style="display: flex;align-items: center;" @confirm="confirm(item)"
                          v-if="item.type == 2" confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
                          icon-color="red" title="确定删除吗？">
                          <div slot="reference" class="status status2">
                            删除
                          </div>
                        </el-popconfirm>

                      </div>
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>


    <el-dialog title="创建报告" :visible.sync="dialogVisible" width="25%">
      <div class="reportDialog">
        <div class="smallTitle">选择报告数据时间</div>
        <el-date-picker value-format="yyyy-MM" v-model="value1" type="monthrange" range-separator="至"
          start-placeholder="开始月份" end-placeholder="结束月份">
        </el-date-picker>
        <div>
          <div class="smallTitle">选择报告生成内容</div>
          <el-tree :data="menu" ref="tree" @check="handleNodeClick" show-checkbox node-key="id" default-expand-all
            :default-checked-keys="menuTwo" :props="defaultProps">
          </el-tree>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="reportTime">确 定</el-button>
      </span>
    </el-dialog>

    <addZF ref="addZF"></addZF>
  </div>
</template>

<script>
import { getIndexData, getDiData, reportList, createReport, reportDel, getReportMenu } from "@/api/newuser";
import * as echarts from 'echarts'
import { demandListNews, visitList, calendar, bannerList } from "@/api/configApi";
import addZF from "../work/components/addZF.vue";

export default {
  components: { addZF },
  data() {
    return {
      zoom: 1,
      bannerList: [],
      user_id: this.$store.state.user.id,
      over_day: this.$store.state.user.over_day,
      telephone: this.$store.state.user.telephone,
      tableData1: [],
      tableData1_page: 1,
      tableData1_none: false,
      tableData2: [],
      tableData2_none: false,
      tableData2_page: 1,
      calendarList: [],
      calendarType: false,
      dataListType: 2,
      disabled1: false,
      disabled2: false,
      disabled3: false,
      loading: true,
      loading2: true,
      loading3: true,
      companyStreetId: 0,
      companyStreetType: 0,
      todayDate: "",
      start_time: '',
      end_time: '',

      scro1: false,
      scro2: false,
      scro3: false,

      start_time2: '',
      end_time2: '',

      homeDate: {},
      homeDate_r: {},
      loading: true,
      backgroundColor: ['#5571c5', '#90cc77', '#fac85b', '#ee6666'],

      reportPage: 1,
      reportData: {},
      dialogVisible: false,
      value1: '',
      value2: '',
      menu: [],
      menuOne: [],
      role: [],
      menuTwo: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      carousel: [
        "http://patent.shundeip.com//storage/uploads/20220112/56faf2997a2b86212482b847ce53c0d1.jpg",
        "http://patent.shundeip.com//storage/uploads/20220112/56faf2997a2b86212482b847ce53c0d1.jpg",
        "http://patent.shundeip.com//storage/uploads/20220112/56faf2997a2b86212482b847ce53c0d1.jpg"
      ]
    };
  },
  created() {
    this.role = this.$store.state.user.role

    this.calendar();
    let width = document.documentElement.clientWidth || document.body.clientWidth;
    this.zoom = width / 1920;

    const startOfYear = this.getStartOfYear();
    const today = this.getToday();
    this.start_time = this.formatDate(startOfYear)
    this.end_time = this.formatDate(today)
    this.value2 = [this.start_time, this.end_time]



    const { firstDayOfLastMonth, lastDayOfLastMonth } = this.getLastMonthInfo();
    console.log(firstDayOfLastMonth); // 输出上个月的第一天
    console.log(lastDayOfLastMonth); // 输出上个月的最后一天
    this.start_time2 = firstDayOfLastMonth
    this.end_time2 = lastDayOfLastMonth

  },
  //过滤器
  filters: {
    //日期格式化
    formatDate: function (value) {
      if (value) {
        return value.substring(0, 10);
      }
    },
    isNull(value) {
      if (value) {
        return value
      } else {
        return 0
      }
    }
  },
  mounted() {
    this.getIndexData()
    this.getDiData()
    this.getReportMenu()
    this.getBannerList()

  },
  methods: {
    getBannerList() {
      bannerList({
        page: 1,
        limit: 10,
        region_id: this.$store.state.user.region_id
      }).then(res => {
        this.bannerList = res.list;
      })
    },
    monthsBetween(dateStr1, dateStr2) {
      // 将日期字符串转换为Date对象
      var date1 = new Date(dateStr1.replace(/-/g, '/'));
      var date2 = new Date(dateStr2.replace(/-/g, '/'));

      // 计算两个日期之间的总毫秒数
      var diff = date2.getTime() - date1.getTime();

      // 计算相隔的月份
      var months = diff / (1000 * 60 * 60 * 24 * 30);

      // 返回月份数（向下取整）
      return Math.floor(months);
    },
    handleNodeClick(data, data1) {
      this.menuTwo = data1.checkedKeys
    },
    getReportMenu() {
      getReportMenu().then(res => {
        this.menu = res
        console.log(this.role, 'this.role');
        this.role.map(async res => {
          if (res.name == '数据' && res.is_show == 0) {
            this.menu.shift()
          }
        })


        console.log(this.menu, 'this.menu');
        this.menu.map(res_ => {
          this.menuOne.push(res_.id)
          res_.children.map(res_1 => {
            this.menuTwo.push(res_1.id)
          })
        })
      })
    },
    getLastMonthInfo() {
      const today = new Date();
      const thisMonth = today.getMonth();
      const lastMonth = thisMonth - 1;
      const lastMonthYear = lastMonth < 0 ? today.getFullYear() - 1 : today.getFullYear();

      // 上个月的 Date 对象
      const firstDayOfLastMonth = new Date(lastMonthYear, lastMonth + 1, 1);
      const lastDayOfLastMonth = new Date(lastMonthYear, lastMonth + 1, 0);

      // 格式化日期为 "YYYY-MM-DD"
      function formatDate(date, type) {
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const month2 = (date.getMonth() + 2).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        if (type == 1) {
          return `${year}-${month}-01`;
        } else {
          return `${year}-${month2}-01`;
        }
      }

      return {
        firstDayOfLastMonth: formatDate(lastDayOfLastMonth, 1),
        lastDayOfLastMonth: formatDate(lastDayOfLastMonth, 2),
      };
    },
    dateChange() {
      this.getIndexData()
    },
    oldDatas(item) {
      if (item.status == 2 || item.type == 1) {
        let routerJump = this.$router.resolve({
          path: "/analysis",
          query: {
            id: item.id,
          },
        });
        window.open(routerJump.href, "_blank");
      } else {
        this.$message({
          message: '报告暂未生成，请稍后再试',
          type: 'warning'
        });
      }

    },
    reportLoding() {
      if (this.disabled3) return
      reportList({
        page: this.reportPage,
        limit: 10
      }).then(res => {
        if (this.reportPage == 1) {
          this.reportData = res
        } else {
          if (this.reportData.list.length < res.count) {
            this.reportData.list.push(...res.list);
          } else {
            this.reportPage -= 1;
            this.disabled3 = true;
          }
        }
        this.$nextTick(() => {
          this.scro3 = this.checkScrollbar('scro3');
        });
        this.reportPage += 1;

      })
    },
    addReport(start_time, end_time, treeId) {
      createReport(
        {
          start_time: start_time,
          end_time: end_time,
          menu: treeId
        }
      ).then(res => {
        this.$message({
          message: '创建成功',
          type: 'success'
        });
        this.cancel()
        this.reportPage = 1
        this.reportData = {}
        this.reportList()
      })
    },
    cancel() {
      this.value1 = ''
      this.dialogVisible = false
    },
    reportTime() {
      let CheckedKeys = this.$refs.tree.getCheckedKeys()
      this.menuTwo = CheckedKeys

      let value1 = this.value1[0]
      let value2 = this.value1[1]
      let year1 = value1.split('-')[0]
      let day1 = value1.split('-')[1]
      let year2 = value2.split('-')[0]
      let day2 = value2.split('-')[1]

      let type = this.monthsBetween(value1, value2)
      if (type >= 12) {
        this.$message({
          message: '最多选择一年的数据，请修改后提交',
          type: 'warning'
        });
      } else {
        this.addReport(this.value1[0], this.value1[1], this.menuTwo.join(','))
      }
    },
    createReport() {
      this.dialogVisible = true
    },
    reportList() {
      reportList({
        page: this.reportPage,
        limit: 10
      }).then(res => {
        this.reportData = res
      })
    },
    goPatent(type) {
      this.$router.push({
        path: "/adminLawNew",
        query: {
          activeName: type,
          start_time: this.start_time2,
          end_time: this.end_time2
        },
      });
    },
    async getLawMonth(type) {
      let date = await getLawMonth({ type: type })
      return date
    },
    getDiData() {
      getDiData({
        start_time: this.start_time2,
        end_time: this.end_time2
      }).then(res => {
        this.homeDate_r = res
        this.loading2 = false
        this.$nextTick(() => {
          // this.pie3()
        })
      })
    },
    getIndexData() {
      getIndexData({
        start_time: this.value2[0],
        end_time: this.value2[1]
      }).then(res => {
        this.homeDate = res
        this.loading = false
        this.$nextTick(() => {
          this.bar()
          // this.pie1()
          this.pie2()
        })
      })
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    sumIsZero(numbers) {
      if (numbers) {
        return numbers.reduce((sum, number) => sum + number, 0) > 0;
      } else {
        return false
      }
    },
    getFirstDayOfLastMonth() {
      const today = new Date();
      const year = today.getFullYear();
      let month = today.getMonth(); // 从0开始的月份
      let day = 1; // 上个月的第一天总是1号

      // 如果当前月份是0（即1月），则年份减1，月份变为11（即12月）
      if (month === 0) {
        month = 11;
        year -= 1;
      } else {
        // 否则月份减1
        month -= 1;
      }

      const firstDayOfLastMonth = new Date(year, month, day);
      return firstDayOfLastMonth.toISOString().split('T')[0]; // 将日期转换为YYYY-MM-DD格式
    },
    bar() {
      // console.log(echarts.getInstanceByDom(this.$refs.bar),'echarts.getInstanceByDom(this.$refs.bar)');

      if (this.$refs.bar && echarts.getInstanceByDom(this.$refs.bar)) {
        echarts.dispose(this.$refs.bar);
      }
      if (!this.sumIsZero(this.homeDate.value_arr)) {
        return
      }

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.bar);

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '0%',
          right: 6.5,
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.homeDate.name_arr.slice(0, 14),
          axisLabel: {
            // rotate: 45, 

            show: true, // 是否显示X轴的内容，不包含两端的文字
            interval: 0,
            // rotate: '50', // 旋转50°
            lineHeight: 18,
            formatter: (params) => {
              var newParamsName = ''// 最终拼接成的字符串
              // var paramsNameNumber = params.length// 实际标签的个数
              // var provideNumber = 6// 每行能显示的字的个数
              // // 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
              // if (paramsNameNumber > provideNumber) {
              //   // ********重点在这里********
              //   newParamsName = params.substring(0, 6) + '..'// 最终拼成的字符串
              // } else { // 将旧标签的值赋给新标签
              //   newParamsName = params
              // }
              // // 将最终的字符串返回
              // return newParamsName

              // newParamsName = params.split("-")[1]
              // return params.split("-")[1] ? params.split("-")[1].split(" ").join("").split("").join("\n") : params.split("-")[0].split(" ").join("").split("").join("\n")
              return params.split("-")[1] ? params.split("-")[1].split(" ").join("").split("").join("") : params.split("-")[0].split(" ").join("").split("").join("")
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          // data: this.homeDate.value_arr,
          data: this.homeDate.value_arr.map((item) => {
            return {
              value: item,
              itemStyle: {
                color: this.getRandomElement(), // 为每个柱子设置随机颜色
              }
            };
          }),
          barWidth: 30, // 设置柱子边框宽度
          type: 'bar',
          label: {
            show: true, // 显示数值
            position: 'top', // 在顶部显示
            // 可以通过 formatter 自定义显示格式
            formatter: '{c}' // {c} 表示数据值
          }
        }],
      };

      // 使用刚指定的配置项和数据显示图表。

      myChart.setOption(option);
    },
    getRandomElement() {
      let colorArr = ['#5571c5', '#90cc77', '#fac85b', '#ee6666', '#73c0de', '#3aa273', '#fc8453', '#9a61b3', '#ea7dcb', '#5571c4', '#90cc77', '#fac85b', '#ee6666', '#73c0de', '#3aa273', '#fc8453', '#9a61b3', '#ea7dcb']
      const randomIndex = Math.floor(Math.random() * colorArr.length);
      return colorArr[randomIndex];
    },
    pie3() {
      if (!(this.homeDate_r.auth_arr && this.homeDate_r.auth_arr.length)) {
        return
      }
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.pie3);

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          type: 'scroll',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },

            labelLine: {
              show: false
            },
            data: this.homeDate_r.auth_arr
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    pie2() {
      if (this.$refs.pie2 && echarts.getInstanceByDom(this.$refs.pie2)) {
        echarts.dispose(this.$refs.pie2);
      }
      if (!(this.homeDate.demand_result && this.homeDate.demand_result.length)) {
        return
      }

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.pie2);

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '1%',
          top: '15%',
          type: 'scroll'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.homeDate.demand_result
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。

      myChart.setOption(option);
    },
    pie1() {

      if (!(this.homeDate.company_num || this.homeDate.organization_num)) {
        return
      }
      if (echarts.getInstanceByDom(this.$refs.pie1)) {
        echarts.dispose(this.$refs.pie1);
      }
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.pie1);

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical', // 垂直排列图例
          left: 'right',      // 将图例放置在右边
          // top: '35%',
          type: 'scroll',
          right: 20,
          top: 20,
          bottom: 20
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.homeDate.pie_arr
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。

      myChart.setOption(option);
    },
    expire(time) {
      let date = new Date(time).getTime();
      if (date < this.todayDate) {
        return true;
      } else {
        return false;
      }
    },
    getStartOfYear() {
      const now = new Date();
      return new Date(now.getFullYear(), 0, 1);
    },
    getToday() {
      return new Date();
    },
    calendar() {
      calendar({
        id: this.user_id,
      }).then((res) => {
        this.calendarList = res;
        this.calendarType = true;
      });
    },
    pushworkWaitvisit() {
      this.$router.push({
        path: "/workWaitvisit2",
        query: {
          type: 3,
        },
      });
    },
    pushworkFollow() {
      this.$router.push({
        path: "/workWaitvisit3",
        query: {
          type: 5,
        },
      });
    },
    pushworkTobear() {
      // this.$router.push('/workTobear')
      this.$router.push({
        path: "/workTobear",
        query: {
          type: this.dataListType,
        },
      });
    },
    confirm(item) {
      console.log('66')
      reportDel({
        report_id: item.id
      }).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.reportPage = 1
        this.reportData = {}
        this.reportLoding()
      })
    },
    pushworkWarning() {
      this.$router.push("/workWarning");
    },
    pushworkCompany() {
      this.$router.push("/workCompany");
    },
    tableclick(row, column, event) {
      this.$router.push({
        path: "/workEnterprisevisit",
        query: {
          id: row.id,
          company_id: row.company_id,
        },
      });
    },
    tableclickAlways(row) {
      this.$router.push({
        path: "/workEnterprisevisit",
        query: {
          company_id: row.company_id,
          company_name: row.company_name,
        },
      });
    },

    addVisit(type) {
      if (type == 1) {
        // this.$router.push("/addWaitvisit");
        this.$refs.addZF.openDialog()
      } else {
        this.$router.push("/addDemand");
      }
    },
    load_1() {
      if (this.tableData1_none) return;
      visitList({
        type: 1,
        page: this.tableData1_page,
        limit: 10,
        // visit_time: this.start_time.slice(0, 10) + '至' + this.end_time.slice(0, 10)
      }).then((res) => {
        let heightBox = this.$refs.scro1.scrollHeight;
        this.tableData1_page += 1;
        if (this.tableData1.length < res.count) {
          this.tableData1.push(...res.list);
          this.$refs.scro1.scrollTo(0, heightBox - res.list.length * 45);
        } else {
          this.tableData1_page -= 1;
          this.tableData1_none = true;
          this.disabled1 = true;
        }

        this.$nextTick(() => {
          this.scro1 = this.checkScrollbar('scro1');
        });
      });
    },
    checkScrollbar(ref) {
      const scrollbarEl = this.$refs[ref];
      // 检查是否有垂直滚动条
      const hasVerticalScrollbar = scrollbarEl.scrollHeight > scrollbarEl.clientHeight;
      return hasVerticalScrollbar;
    },
    demandData(item) {
      let routerJump = this.$router.resolve({
        path: "/workWaitvisit3",
        query: {
          type: 7,
          name: item.name,
          date: this.value2[0],
          date_end: this.value2[1],
        },
      });
      window.open(routerJump.href, "_blank");
    },
    load_2() {
      if (this.tableData2_none) return;
      demandListNews({
        user_id: this.user_id,
        type: 2,
        page: this.tableData2_page,
        limit: 10,
        // so_time: this.start_time.slice(0, 10) + '至' + this.end_time.slice(0, 10)
      }).then((res) => {
        let heightBox = this.$refs.scro2.scrollHeight;
        this.tableData2_page += 1;
        if (this.tableData2.length < res.count) {
          this.tableData2.push(...res.list);
          this.$refs.scro2.scrollTo(0, heightBox - res.list.length * 45);
        } else {
          this.tableData2_page -= 1;
          this.tableData2_none = true;
          this.disabled2 = true;
        }
        this.$nextTick(() => {
          this.scro2 = this.checkScrollbar('scro2');
        });
      });
    },
    // tableFollow(row, column, event) {
    //   this.$router.push('/workEnterprisevisit')
    // },
    // empty() {
    //   this.add_form = {
    //     name: '',
    //     time: '',
    //     Visitpeople: '',
    //     enterprise: []
    //   }
    // },
    // close() {
    //   // console.log('关闭');
    //   // this.empty()
    //   this.addVisit = false
    // },
    // preservation() {
    //   // console.log('保存');
    //   this.empty()
    //   this.addVisit = false
    //   this.$router.push('/workWaitvisit')
    // },
    goVisit(row) {
      this.$router.push({
        path: "/workVisit",
        query: {
          id: row.have_visit != 2 ? row.id : row.demand_id,
          have_visit: row.have_visit,
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .el-dialog__body {
  padding: 0px 20px !important;
}

.scroll-hidden::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

/* 考虑到Firefox和其他浏览器可能不支持上述伪元素，你可以设置一个备用样式，比如： */
.scroll-hidden {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-y: scroll;
  /* 或者 auto，取决于你的需求 */
}

/* 需要注意的是，上述Firefox和IE的样式可能不完全可靠或需要额外的CSS hack来实现完全隐藏滚动条的效果。 */

.enterpriseBox {

  &> :first-child {
    .info .visitInfo .time1 {
      color: #e85a5b !important;
    }
  }

  &> :nth-child(2) {
    .info .visitInfo .time1 {
      color: #ec893c !important;
    }
  }

  .enterpriseItem:hover {
    .goVisitBox {

      .goVisit {
        display: block;
        margin: 0 auto;
      }
    }
  }

  .enterpriseItem {
    display: flex;
    background-color: #f3f8fe;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 15px;
    position: relative;

    .goVisitBox {
      // width: 80px;
      height: 44px;

      .goVisit {
        display: none;
        height: 35px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .goData {
    display: flex;
    padding: 10px;
    flex: 1;
    }

    .icon {
      background-color: #e2ebfc;
      color: #86a9f8;
      font-size: 21px;
      display: flex;
      align-items: center;
      width: 40px;
      height: 44px;
      justify-content: center;
      border-radius: 10px;
      margin-right: 10px;
      -webkit-user-select: none;
      /* Safari */
      -moz-user-select: none;
      /* Firefox */
      -ms-user-select: none;
      /* Internet Explorer/Edge */
      user-select: none;
      /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
    }

    .el-icon-delete-solid {
      -webkit-user-select: none;
      /* Safari */
      -moz-user-select: none;
      /* Firefox */
      -ms-user-select: none;
      /* Internet Explorer/Edge */
      user-select: none;
      /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .title {
        display: flex;
        gap: 5px;
        align-items: center;
        flex-wrap: wrap;
        line-height: initial;

        .el-tag {
          padding: 0 5px;
          font-size: 12px;
          background-color: rgba(0, 0, 0, 0);
        }
      }

      .visitInfo {
        display: flex;
        // font-weight: bold;
        font-size: 15px;
        margin-top: 5px;

        .demand {
          padding: 0 10px 0 0;
          margin: 0 10px 0 0;
          color: #6d7077;
          // font-weight: bold;
          line-height: initial;
        }

        .people {
          padding: 0 10px 0 0;
          margin: 0 10px 0 0;
          color: #6d7077;
          border-right: 1px solid #6d7077;
          // font-weight: bold;
        }

        .time1 {
          color: #6d7077;
        }
      }
    }
  }
}

.introduction {
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.countdown {
  margin-left: 13px;
  font-size: 16px;
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  margin-bottom: 13px;
  color: #3c73f6;
  font-weight: bold;
}

.title_f {
  display: flex;
  align-items: center;
  gap: 5px;
}

.app-main {
  background: linear-gradient(to bottom, #1c7df0, #c0d9f8) !important;
  background-color: initial !important;
}

.main-container {
  background-color: initial !important;
  background: linear-gradient(to bottom, #1c7df0, #c0d9f8) !important;
}

.title_B {
  padding-bottom: 10px;
  border-bottom: 1px solid #e9e8fa;
}

.dp_h {
  height: 415px;
}

.reportDialog {

  // display: flex;
  // justify-content: center;
  .smallTitle {
    margin: 10px 0;
  }
}

.reportBox {
  margin-top: 26px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.boxTitle_report {
  padding: 20px 20px 22px;
  background: linear-gradient(to right, #316cf6, #6ac8f5);
}

.report1 {
  height: 465px !important;
}

.report {
  height: 290px;
  overflow: hidden auto;

  /* 设置滚动条的宽度 */
  ::-webkit-scrollbar {
    width: 12px;
    /* 水平滚动条的高度 */
    height: 12px;
    /* 垂直滚动条的宽度 */
  }

  /* 可选：设置滚动条轨道的样式 */
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* 轨道颜色 */
  }

  /* 设置滚动条的样式 */
  ::-webkit-scrollbar-thumb {
    background: #888;
    /* 滚动条颜色 */
  }

  /* 设置当鼠标悬停在滚动条上时的样式 */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* 滚动条悬停颜色 */
  }

  .item {
    display: flex;
    justify-content: space-between;
    padding: 20px 15px;
    // border-top: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    cursor: pointer;

    .text {

      .title {
        margin-bottom: 15px;
        font-weight: bold;
        font-size: 18px;
      }

      .date {
        color: #ababab;
        font-size: 14px;
      }
    }

    .statusBox {
      display: flex;
      gap: 10px;

      .status {
        display: flex;
        align-items: center;
        color: #ababab;
        font-size: 16px;
        cursor: pointer;
      }

      .status1 {
        color: #72a2f8;
      }

      .status2 {
        color: #ee6666;
      }
    }

  }
}

.textDes {
  //一行超出显示省略号
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  display: inline-block;
}

.red {
  background-color: #ff5f58 !important;
  color: #fff !important;
}

::v-deep .el-calendar-table td.is-today {
  background-color: #f2f8fe;

  .el-calendar-day {
    border: 1px solid #409eff !important;
    border-radius: 5px;
  }
}

.nullBgc {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

.b_bule {
  background-color: #d3e2ff;
  margin: 3px 5px;
  border-radius: 5px;
  color: #4585ff;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  border: 0;
}

.b_red {
  color: #ff5f58;
  background-color: #fff6f5;
}

.b_red2 {
  color: #ffffff;
  background-color: #ff5f58;
}

.is-selected {
  background-color: #387dff;
  color: #fff;
  border-radius: 5px;
}

.is-selected1 {
  background-color: #6e798d;
  color: #fff;
  border-radius: 5px;
}

.button_qb {
  // background-color: #ecf3ff;
  // color: #3e7ef5;
  background-color: #fff;
  color: #a1a1a5;
  border: none;
  font-size: 16px;
}

.el-main {
  margin-right: 15px;
  border-radius: 5px;
  margin: 25px 30px 0 30px;
  background-color: rgba(255, 255, 255, 0);
  padding: 0;
}

.t_buttpn {
  font-size: 14px;
}

.addReport_b {
  background: linear-gradient(to right, #ec662c, #f2a941);
  border: none;
}

.item_list {
  display: inline-block;
  background-color: #d3e2ff;
  margin: 0px 5px;
  border-radius: 5px;
  padding: 0px 5px;
  color: #387dff;
  font-weight: initial;
  font-size: 10px;
}

.item_list_tag {
  padding: 0px 5px;
  margin-top: 3px;
  margin-right: 3px;
}

.item_demand {
  color: #fff;
  font-size: 14px;
  background-color: #ff5f58;
  margin-top: 5px;
}

.item_demand:nth-child(1) {
  margin-top: 0;
}

.item_demand2 {
  background-color: #fff6f5;
  font-size: 14px;
  color: #ff5f58;
  border: 1px solid #ff5f58;
}

::v-deep .el-card {
  border-radius: 10px;
}

::v-deep .b_list_box {
  .el-card__body {
    padding: 0;
  }

  .work_b_text_b {
    // padding: 0 20px 20px 20px;
    // height: 798px;
    overflow: hidden;
    // overflow-x: hidden;
    // overflow-y: auto;
    width: 102%;

    .work_b_text_b_tabs_3 {
      .el-tabs__header {
        .el-tabs__nav-wrap {
          .el-tabs__nav-scroll {
            .el-tabs__nav {
              /*.el-tabs__item {*/
              /*  padding: 0 20px !;*/
              /*}*/

              // .el-tabs__item:nth-child(2) {
              //   padding: 0 60px 0 0 !important;
              // }

              // .el-tabs__item:nth-child(3) {
              //   padding: 0 60px 0 60px !important;
              // }

              // .el-tabs__item:nth-child(4) {
              //   padding: 0 0 0 60px !important;
              // }
            }
          }
        }
      }

      .el-tabs__content {
        .el-tab-pane {
          .b_tableData_3_box {
            .el-table__header-wrapper {
              thead {
                tr th:nth-child(2) {
                  text-align: left;
                  /*padding: 0 40px;*/
                }
              }
            }

            .el-table__body-wrapper {
              table {
                tr td:nth-child(1) {
                  // text-align: left;
                  color: #387dff;
                  font-weight: bolder;
                  font-size: 16px;
                }

                tr td:nth-child(2) {
                  text-align: left;
                  color: #334681;
                  font-weight: initial;
                }
              }
            }
          }
        }
      }
    }

    .el-tabs {
      .el-tabs__header {
        .el-tabs__nav-wrap {
          .el-tabs__nav-scroll {
            .el-tabs__nav {}
          }
        }
      }

      .el-tabs__content {
        .el-tab-pane {
          .b_tableData_3_box {
            .el-table__header-wrapper {
              thead {
                tr th:nth-child(2) {}
              }
            }

            .el-table__body-wrapper {
              table {
                tr td:nth-child(1) {
                  color: #387dff;
                  font-weight: bolder;
                  font-size: 16px;
                }

                tr td:nth-child(2) {
                  text-align: initial;
                  color: #334681;
                  font-weight: initial;
                }
              }
            }
          }
        }
      }
    }

    .table_2 {
      .el-table__header-wrapper {
        margin-top: 6px;

        .has-gutter {
          tr {
            th {
              padding: 6px 0 12px 0;
            }
          }

          tr th:nth-child(2) {
            text-align: center;

            .cell {
              padding: 0;
            }
          }
        }
      }
    }

    .el-table {
      font-size: 10px;

      .el-table__header-wrapper {
        .has-gutter {
          tr th {
            font-weight: inherit;
            color: #334681;
            font-size: 14px;

            .cell {
              // padding: 0 0 0 10px;
            }
          }

          tr th:nth-child(2),
          tr th:nth-child(3),
          tr th:nth-child(4),
          tr th:nth-child(5),
          tr th:nth-child(6),
          tr th:nth-child(7),
          tr th:nth-child(8) {
            text-align: center;
            font-size: 14px;
          }
        }

        font-weight: initial;
      }

      .el-table__body-wrapper {
        table {
          tbody {
            tr td {
              font-size: 14px;
              text-align: center;
              color: #334681;
            }

            tr td:nth-child(2),
            tr td:nth-child(3) {
              text-align: center;
              // color: #387DFF;//前面两个模块的颜色
              // font-weight: bolder;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

.work_b_box {
  min-width: 602px;
  overflow: hidden;

  .work_b_title {
    padding: 20px;
    // background-color: #387DFF;
    text-align: right;

    .right_text {
      position: absolute;
      top: 4px;
      right: 0;
      font-size: 16px;

      .text_1 {
        color: #4995f4 !important;
        zoom: var(--zoom);
        cursor: pointer;
      }

      .text_2 {
        zoom: var(--zoom);
        cursor: pointer;
      }
    }

    // button {
    //   background-color: #fff;
    //   color: #387dff;
    // }

    .b_title {
      font-size: 22px;
      font-weight: bolder;
      // color: #fff;
      text-align: left;
      display: flex;
      align-items: center;

      .el-dropdown-link {
        color: #2a65fb !important;
        background-color: #ebf2fe !important;
        display: inline-block;
        padding: 8px 10px;
        border-radius: 30px;
        font-size: 14px;
        font-weight: initial !important;

        .el-popper {
          position: absolute;
          left: 0;
          top: 24px;
          width: 100px;
          z-index: 999999;
          font-size: 14px;
          line-height: 24px;
          background-color: #0e1941;
          color: #4995f4;
          cursor: pointer;
          transform: scale(0);
          transform-origin: 0 0;
          transition: all 0.2s;

          .el-popper-item {
            padding: 5px;
          }

          .el-popper-item:hover {
            color: #68d8fe !important;
            background-color: #28293f !important;
          }

          .el-popper-item-active {
            color: #68d8fe !important;
            background-color: #28293f !important;
          }
        }
      }

      .el-dropdown-link:hover {
        .el-popper {
          transform: scale(1);
        }
      }
    }
  }
}

.col_scroll {
  overflow: scroll;
  overflow-y: auto;
  overflow-x: auto;
}

.col_scroll_new {
  zoom: var(--zoom);
}

::v-deep .box-card {
  min-width: 280px;

  .el-card__header {
    border: none;
    padding: 20px 9px 20px 7px;
  }

  .el-card__body {
    padding: 0;

    .el-calendar__header {
      padding: 0px 20px 12px 20px;
      border-bottom: 0px solid #ebeef5;

      .el-calendar__title {
        // display: none;
        font-size: 12px;
      }

      .el-calendar__button-group {

        // width: 100%;
        // text-align: center;
        .el-button-group {
          .el-button {
            padding: 7px 9px;
          }
        }
      }
    }

    .el-calendar__body {
      padding: 0 9px 7px;

      thead {
        th {
          color: #334681;
          background-color: #f5f6f9;
          font-size: 16px;
        }
      }

      tbody {
        margin-top: 13px !important;

        .el-calendar-table__row {
          .el-calendar-day {
            margin: 1px;
            box-sizing: border-box;
          }

          .prev {
            border: none;
            // pointer-events: none;
            font-size: 12px;
          }

          .current {
            font-size: 12px;
            border: none;
          }

          .next {
            border: none;
            font-size: 12px;
            // pointer-events: none;

            // p {
            //   background-color: #fff !important;
            //   color: #C0C4CC !important;
            // }
          }

          .el-calendar-day {
            height: 42px;
            line-height: 42px;
            text-align: center;
            padding: 0;
          }
        }
      }
    }
  }

  .clearfix {
    font-size: 22px;
    font-weight: bold;

    span {
      vertical-align: middle;
    }

    button {
      font-size: 14px;
      float: right;
      padding: 9px 15px;
      background-color: #ecf3ff;
      border: none;
      color: #3e7ef5;
    }
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
}

::v-deep .work_t_b {

  // height: 415px;
  .work_t_title {
    text-align: rights;

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .boxTitle {
      display: flex;
      justify-content: space-between;

      .title {
        display: flex;
      }
    }

    .t_title {
      font-size: 22px;
      // font-weight: bolder;
      line-height: 32px;
      text-align: left;
      margin-right: 10px;
      font-weight: bold;
    }

    .visitObjNew {
      height: 100%;
      display: flex;
      flex-direction: column;

      .visitItem {
        flex: 1;
        background-color: #f5f6fa;
        border-radius: 5px;
        margin-top: 10px;
        text-align: center;
        padding: 10px 0 15px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .title {
          justify-content: center;
          color: #666;
          font-size: 14px;
        }

        .number {
          font-size: 32px;
          margin-top: 7px;
          font-weight: bold;

          span {
            font-weight: initial;
            font-size: 14px;
            margin-left: 5px;
          }
        }
      }
    }

    .visitObj {
      display: flex;
      gap: 10px;

      .visitItem {
        flex: 1;
        background-color: #f5f6fa;
        border-radius: 5px;
        margin-top: 10px;
        text-align: center;
        padding: 10px 0 15px 0;

        cursor: pointer;

        .title {
          justify-content: center;
          color: #666;
          font-size: 14px;
        }

        .number {
          font-size: 32px;
          margin-top: 7px;
          font-weight: bold;

          span {
            font-weight: initial;
            font-size: 14px;
            margin-left: 5px;
          }
        }
      }
    }

    .visitObj_r {
      flex-wrap: wrap;

      .visitItem {
        flex: initial;
        width: 31.3%;
        padding: 20px 0 25px 0;

        .number {
          margin-top: 13px;
        }
      }
    }
  }

  .work_b_text {
    // margin: 20px 0 0 0;
    // height: 330px;
    // overflow: scroll;
    // overflow-x: hidden;
    // overflow-y: auto;
    // width: 100%;
    overflow: hidden;

    .el-table {
      .el-table__header-wrapper {
        table {
          .has-gutter {
            tr th {
              font-weight: initial;
              font-size: 14px;
              color: #334681;
            }

            tr th:nth-child(3) {
              text-align: center;
            }
          }
        }
      }

      .el-table__body-wrapper {
        table {
          tbody {
            tr td {
              font-size: 14px;
              height: 58px;
            }

            tr:hover {
              td:nth-child(3) {

                .red,
                .time {
                  display: none;
                }

                .goVisit {
                  display: block;
                  margin: 0 auto;
                }
              }
            }

            tr td:nth-child(3) {
              text-align: center;

              .time {
                display: block;
              }

              .goVisit {
                display: none;
              }
            }
          }
        }
      }
    }

    .item_list {
      /*display: inline;*/
      background-color: #d3e2ff;
      /*margin: 3px 5px;*/
      border-radius: 5px;
      padding: 5px 10px;
      color: #387dff;
      font-size: 14px;
      /*height: 20px;*/
      /*line-height: 20px;*/
    }

    .item_demand {
      color: #ff5f58;
      background-color: #fff6f5;
    }
  }

  .work_b_text2 {
    .el-table {
      .el-table__header-wrapper {
        table {
          .has-gutter {
            tr th:nth-child(4) {
              text-align: center;
            }
          }
        }
      }

      .el-table__body-wrapper {
        table {
          tbody {
            tr:hover {

              // td:nth-child(4) {
              //   text-align: center;
              // }
              td:nth-child(4) {
                .time {
                  display: none;
                }

                .goVisit {
                  display: block;
                  margin: 0 auto;
                }
              }
            }

            tr {

              td:nth-child(5),
              td:nth-child(4) {
                text-align: center;

                .time {
                  display: block;
                }

                .goVisit {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
}

.text_one {
  color: #334681;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 5px;
}

.text_one::before {
  content: "";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  top: 50%;
  left: 5px;
  border-radius: 50%;
  background: #387dff;
  transform: translate(-50%, -50%);
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}</style>
